<template>
<!-- 双击展现整个地图 -->
  <div class="com-container" @dblclick="revertMap">
       <div class="com-chart" ref="map_ref"></div>
  </div>
 
</template>

<script>
import axios from 'axios'
import {getProvinceMapInfo} from '../utils/map_utils'

export default {
    data(){
        return {
            charInstance:null,
            allData:null,
            mapData:{},//所获取的省份地图矢量数据---缓存
        }
    },
    created () {
    // 在组件创建完成之后 进行回调函数的注册
    this.$socket.registerCallBack('mapData', this.getData)
  },
    mounted(){
        this.initChart()
         this.$socket.send({
      action: 'getData',
      socketType: 'mapData',
      chartName: 'map',
      value: ''
    })
        window.addEventListener('resize',this.screenAdapter)
        this.screenAdapter()
    },
    destroyed(){
        window.removeEventListener('resize',this.screenAdapter)
        this.$socket.unRegisterCallBack('mapData')
    },
    methods:{
        async initChart(){
            this.charInstance=this.$echarts.init(this.$refs.map_ref,'chalk')
            const ret=await axios.get('http://localhost:8999/api/static/map/china.json')
            console.log("数据是"+ret);
            this.$echarts.registerMap('china',ret.data)
            const initOption={
                title:{
                    text:'▎商家分布',
                    left:20,
                    top:20
                },
                geo:{
                    type:'map',
                    map:'china',
                    // 地图位置
                    top:'5%',
                    bottom:'5%',
                    // 配置颜色
                    itemStyle:{
                        areaColor:'#2E72BF',
                        borderColor:'#333'
                    }
                },
                legend:{
                    left:'5%',
                    bottom:'5%',
                    // 方向
                    orient:'vertical'
                }
            }
            this.charInstance.setOption(initOption)
            this.charInstance.on('click',async arg=>{
                // console.log("被点击了");
                // console.log(arg);
                const provinceInfo=getProvinceMapInfo(arg.name)
                // console.log(provinceInfo);  
                if(!this.mapData[provinceInfo.key]){
                const ret=await axios.get('http://localhost:8999/' + provinceInfo.path)
                this.mapData[provinceInfo.key]=ret.data
                this.$echarts.registerMap(provinceInfo.key,ret.data)
                console.log(ret);
               }
                const changeOption={
                    geo:{
                        map:provinceInfo.key
                    }
                }
                this.charInstance.setOption(changeOption)
           })
        },
        async getData(ret){
            //const {data:ret}=await this.$http.get('map')
            this.allData=ret
            // console.log(this.allData);
            this.updateChart()
        },
        updateChart(){
            const legendArr=this.allData.map(item=>{
                return item.name
            })
            // 如果想在地图中显示散点数据实验我们需要给散点的图标增加一个配置，coordinateSystem:geo
            const seriesArr=this.allData.map(item=>{
                return {
                    type:'effectScatter',
                    // 涟漪效果
                    rippleEffect:{
                        scale:5,
                        //涟漪效果为空心状态
                        brushType:'stroke'
                    },
                    name:item.name,
                    data:item.children,
                    coordinateSystem:'geo'
                }
            })
            const dataOption={
                legend:{
                    data:legendArr
                },
                series:seriesArr
            }
            this.charInstance.setOption(dataOption)
        },
        screenAdapter(){
            const titleFontSize=this.$refs.map_ref.offsetWidth/100*3.6
            const adapterOption={
                title:{
                    textStyle:{
                       fontSize: titleFontSize
                    }
                },
                legend:{
                    itemWidth:titleFontSize/2,
                    itemHeight:titleFontSize/2,
                    // 间隔
                    itemGap:titleFontSize/2,
                    textStyle:{
                        fontSize:titleFontSize/2
                    }
                }
            }
            this.charInstance.setOption(adapterOption)
            this.charInstance.resize()
        },
        //回到中国地图
        revertMap(){
            const revertOption={
                geo:{
                    map:'china'
                }
            }
            this.charInstance.setOption(revertOption)
        }
    }
}
</script>

<style>

</style>